<!doctype html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" >
    <link rel="stylesheet" href="assets/css/fontawesome.min.css" >
    <link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css" >
    <link rel="stylesheet" href="assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css" >
    <link rel="stylesheet" href="assets/plugins/overlayscrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="assets/css/backend.css" >
    <title>Fresns 管理中心</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fresns-navbar">
      <a class="navbar-brand" href="#"><img src="assets/images/logo.png" height="30" alt="Fresns"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a class="nav-link" href="index.html">仪表盘</a></li>
          <li class="nav-item"><a class="nav-link" href="system-language.html">系统</a></li>
          <li class="nav-item active"><a class="nav-link" href="operating-user.html">运营</a></li>
          <li class="nav-item"><a class="nav-link" href="themes.html">主题</a></li>
          <li class="nav-item"><a class="nav-link" href="plugins.html">插件</a></li>
          <li class="nav-item"><a class="nav-link" href="clients.html">客户端</a></li>
          <li class="nav-item"><a class="nav-link" href="store.html">应用市场</a></li>
        </ul>
        <span class="navbar-text">admin <a href="#">[退出]</a> <a href="https://fresns.cn" target="_blank">站点首页</a></span>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-xl-2 fresns-sidebar">
          <h3 class="d-none d-sm-block">运营</h3>
          <button class="btn btn-primary btn-block d-block d-sm-none" type="button" data-toggle="collapse" data-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="true">
            <i class="fas fa-list-ul"></i> 运营
          </button>
          <div class="collapse show" id="sidebarNav">
            <ul class="nav flex-column">
              <li class="nav-item"><a class="nav-link" href="operating-user.html"><i class="fas fa-users"></i> 用户配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-rename.html"><i class="far fa-keyboard"></i> 命名配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-interactive.html"><i class="far fa-list-alt"></i> 互动配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-emoji.html"><i class="far fa-smile-beam"></i> 表情配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-publish-post.html"><i class="far fa-edit"></i> 发表配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-filter.html"><i class="fas fa-spell-check"></i> 过滤配置</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-role.html"><i class="far fas fa-user-tag"></i> 用户角色</a></li>
              <li class="nav-item"><a class="nav-link active" href="operating-group.html"><i class="fas fa-columns"></i> 内容小组</a></li>
              <li class="nav-item"><a class="nav-link" href="operating-expand.html"><i class="fab fa-codepen"></i> 扩展管理</a></li>
            </ul>
            <div class="fresns-copyright">
              <p>Powered by Fresns</p>
            </div>
          </div>
        </div>

        <div class="col-sm-9 col-xl-10 fresns-content">
          <h3>内容小组 <a href="operating-group.html" class="ml-4 pl-4 text-primary border-left">全部小组</a> <a href="operating-group-hot.html" class="ml-3 text-secondary">推荐小组</a> <a href="operating-group-disabled.html" class="ml-3 text-secondary">停用小组</a></h3>
          <!-- Content Start -->
          <form>
            <div class="accordion" id="accordionExample">
              <!-- card -->
              <div class="card">
                <div class="card-header" id="headingOne">
                  <div class="input-group">
                    <div class="input-group-prepend group-collapse">
                      <button class="btn btn-outline-secondary" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fas fa-plus"></i></button>
                    </div>
                    <button type="button" class="form-control text-left" data-toggle="modal" data-target="#group-one">购物交流</button>
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i></button>
                      <button type="button" class="btn btn-outline-secondary">删除</button>
                    </div>
                  </div>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                  <ul class="list-group list-group-flush">
                    <!-- class -->
                    <li class="list-group-item">
                      <div class="row fresns-class">
                        <div class="col-sm-1 align-self-center"><input type="number" class="form-control" value="1"></div>
                        <div class="col-sm-4 align-self-center">晒单</div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_hot_2" checked>
                            <label class="custom-control-label" for="is_hot_2">是否推荐</label>
                          </div>
                        </div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_show_2" checked>
                            <label class="custom-control-label" for="is_show_2">是否显示</label>
                          </div>
                        </div>
                        <div class="col-sm-3 align-self-center text-right">
                          <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#group-two">编辑</button>
                          <button type="button" class="btn btn-link btn-sm text-danger">停用</button>
                        </div>
                      </div>
                    </li>
                    <!-- class -->
                    <li class="list-group-item">
                      <div class="row fresns-class">
                        <div class="col-sm-1 align-self-center"><input type="number" class="form-control" value="2"></div>
                        <div class="col-sm-4 align-self-center">优惠活动</div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_hot_3">
                            <label class="custom-control-label" for="is_hot_3">是否推荐</label>
                          </div>
                        </div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_show_3" checked>
                            <label class="custom-control-label" for="is_show_3">是否显示</label>
                          </div>
                        </div>
                        <div class="col-sm-3 align-self-center text-right">
                          <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#group-two">编辑</button>
                          <button type="button" class="btn btn-link btn-sm text-danger">停用</button>
                        </div>
                      </div>
                    </li>
                    <!-- class -->
                  </ul>
                </div>
              </div>
              <!-- card -->
              <div class="card">
                <div class="card-header" id="headingTwo">
                  <div class="input-group">
                    <div class="input-group-prepend group-collapse">
                      <button class="btn btn-outline-secondary" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"><i class="fas fa-plus"></i></button>
                    </div>
                    <button type="button" class="form-control text-left" data-toggle="modal" data-target="#group-one">产品交流</button>
                    <div class="input-group-append">
                      <button  type="button"class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i></button>
                      <button type="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i></button>
                      <button type="button" class="btn btn-outline-secondary">删除</button>
                    </div>
                  </div>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                  <ul class="list-group list-group-flush">
                    <!-- class -->
                    <li class="list-group-item">
                      <div class="row fresns-class">
                        <div class="col-sm-1 align-self-center"><input type="number" class="form-control" value="1"></div>
                        <div class="col-sm-4 align-self-center">营养/保健/养生</div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_hot_4">
                            <label class="custom-control-label" for="is_hot_4">是否推荐</label>
                          </div>
                        </div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_show_4" checked>
                            <label class="custom-control-label" for="is_show_4">是否显示</label>
                          </div>
                        </div>
                        <div class="col-sm-3 align-self-center text-right">
                          <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#group-two">编辑</button>
                          <button type="button" class="btn btn-link btn-sm text-danger">停用</button>
                        </div>
                      </div>
                    </li>
                    <!-- class -->
                    <li class="list-group-item">
                      <div class="row fresns-class">
                        <div class="col-sm-1 align-self-center"><input type="number" class="form-control" value="2"></div>
                        <div class="col-sm-4 align-self-center">孕产/育儿/亲子</div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_hot_5">
                            <label class="custom-control-label" for="is_hot_5">是否推荐</label>
                          </div>
                        </div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_show_5" checked>
                            <label class="custom-control-label" for="is_show_5">是否显示</label>
                          </div>
                        </div>
                        <div class="col-sm-3 align-self-center text-right">
                          <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#group-two">编辑</button>
                          <button type="button" class="btn btn-link btn-sm text-danger">停用</button>
                        </div>
                      </div>
                    </li>
                    <!-- class -->
                  </ul>
                </div>
              </div>
              <!-- card -->
              <div class="card">
                <div class="card-header" id="headingThree">
                  <div class="input-group">
                    <div class="input-group-prepend group-collapse">
                      <button class="btn btn-outline-secondary" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"><i class="fas fa-plus"></i></button>
                    </div>
                    <button type="button" class="form-control text-left" data-toggle="modal" data-target="#group-one">帖子交流</button>
                    <div class="input-group-append">
                      <button  type="button"class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i></button>
                      <button type="button" class="btn btn-outline-secondary">删除</button>
                    </div>
                  </div>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                  <ul class="list-group list-group-flush">
                    <!-- class -->
                    <li class="list-group-item">
                      <div class="row fresns-class">
                        <div class="col-sm-1 align-self-center"><input type="number" class="form-control" value="1"></div>
                        <div class="col-sm-4 align-self-center">闲聊杂谈</div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_hot_6">
                            <label class="custom-control-label" for="is_hot_6">是否推荐</label>
                          </div>
                        </div>
                        <div class="col-sm-2 align-self-center">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_show_6" checked>
                            <label class="custom-control-label" for="is_show_6">是否显示</label>
                          </div>
                        </div>
                        <div class="col-sm-3 align-self-center text-right">
                          <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#group-two">编辑</button>
                          <button type="button" class="btn btn-link btn-sm text-danger">停用</button>
                        </div>
                      </div>
                    </li>
                    <!-- class -->
                  </ul>
                </div>
              </div>
              <!-- card -->
            </div>

            <!-- Form Submit -->
            <div class="mt-3">
              <button type="submit" class="btn btn-primary ml-2">保存</button>
              <button type="button" class="btn btn-sm btn-link ml-3 text-secondary" data-toggle="modal" data-target="#group-one"><i class="fas fa-plus-circle"></i> 新增一级小组</button>
              <button type="button" class="btn btn-sm btn-link ml-3 text-secondary" data-toggle="modal" data-target="#group-two"><i class="fas fa-plus-circle"></i> 新增二级小组</button>
            </div>
          </form>
          <!-- Content End -->
        </div>
      </div>
    </div>

    <!-- group-one Modal -->
    <div class="modal fade" id="group-one" tabindex="-1" role="dialog" aria-labelledby="group-one" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">小组管理</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group row">
                <label for="label" class="col-sm-3 col-form-label">显示顺序</label>
                <div class="col-sm-9">
                  <input type="number" class="form-control" value="1">
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-3 col-form-label">小组名称</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" value="小组名称">
                  <small class="form-text text-muted">支持多语言</small>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success">提交</button>
          </div>
        </div>
      </div>
    </div>

    <!-- group-two Modal -->
    <div class="modal fade bd-example-modal-lg" id="group-two" tabindex="-1" role="dialog" aria-labelledby="group-two" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">小组管理</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">所属小组</label>
                <div class="col-sm-10">
                  <select class="custom-select">
                    <option value="1" selected>购物交流</option>
                    <option value="2">产品交流</option>
                    <option value="3">帖子交流</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">显示顺序</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" value="1">
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组名称</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" value="小组名称">
                  <small class="form-text text-muted">支持多语言</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组描述</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="2">最近购买的订单包裹收到了吗？整个购物体验怎么样？有没有想和大家分享和吐槽的？快来晒出你的订单和感受吧，还有金币和美金送哦！</textarea>
                  <small class="form-text text-muted">支持多语言</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组封面</label>
                <div class="col-sm-10">
                  <input type="url" class="form-control" value="https://cdn.fresns.cn/default/icon.png">
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组条幅</label>
                <div class="col-sm-10">
                  <input type="url" class="form-control" value="https://cdn.fresns.cn/default/banner.png">
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组模式</label>
                <div class="col-sm-10">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="multiple_user_false" name="multiple_user" value="false" class="custom-control-input" checked>
                    <label class="custom-control-label" for="multiple_user_false">公开（任何人都能查看小组内帖子）</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="multiple_user_true" name="multiple_user" value="true" class="custom-control-input">
                    <label class="custom-control-label" for="multiple_user_true">非公开（只有成员才能查看小组内帖子）</label>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">关注方式</label>
                <div class="col-sm-10">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="multiple_user_false1" name="multiple_user1" value="false" class="custom-control-input" checked>
                    <label class="custom-control-label" for="multiple_user_false1">原生方式</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="multiple_user_true1" name="multiple_user1" value="true" class="custom-control-input">
                    <label class="custom-control-label" for="multiple_user_true1">仅插件方式</label>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">推荐小组</label>
                <div class="col-sm-10">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="is_hot">
                    <label class="custom-control-label" for="is_hot">是否推荐</label>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">小组管理员</label>
                <div class="col-sm-10">
                  <select class="custom-select" multiple>
                    <option value="1" selected>Jarvis</option>
                    <option value="1">Jie</option>
                    <option value="2" selected>唐杰</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">浏览权限</label>
                <div class="col-sm-10">
                  <select class="custom-select" multiple>
                    <option value="1">管理员</option>
                    <option value="2">禁言用户</option>
                    <option value="3">普通会员</option>
                  </select>
                  <small class="form-text text-muted">留空代表所有用户角色均有权限。当小组权限与用户角色权限冲突时，以用户角色权限为准。</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">发布权限</label>
                <div class="col-sm-10">
                  <select class="custom-select" multiple>
                    <option value="1" selected>管理员</option>
                    <option value="2">禁言用户</option>
                    <option value="3">普通会员</option>
                  </select>
                  <small class="form-text text-muted">留空代表所有用户角色均有权限。当小组权限与用户角色权限冲突时，以用户角色权限为准。</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="label" class="col-sm-2 col-form-label">评论权限</label>
                <div class="col-sm-10">
                  <select class="custom-select" multiple>
                    <option value="1">管理员</option>
                    <option value="2">禁言用户</option>
                    <option value="3">普通会员</option>
                  </select>
                  <small class="form-text text-muted">留空代表所有用户角色均有权限。当小组权限与用户角色权限冲突时，以用户角色权限为准。</small>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success">提交</button>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript -->
    <script src="assets/js/jquery-3.5.1.slim.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/select2/js/select2.full.min.js"></script>
    <script src="assets/plugins/overlayscrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <script src="assets/js/backend.js"></script>
  </body>
</html>